<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <!-- <el-breadcrumb-item> <i class="el-icon-lx-friendadd"></i> 表单 </el-breadcrumb-item> -->
                <el-breadcrumb-item><i class="el-icon-lx-friendadd"></i> 我的小组</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-form ref="form" :model="teamData" label-width="80px" style="margin-left: 70px">
                    <el-form-item label="组 名:">
                        <span>{{ teamData[0].teamName }}</span>
                    </el-form-item>
                    <el-form-item label="组 长:">
                        <span>{{ teamLeader }}</span>
                    </el-form-item>
                    <el-form-item label="组 员:">
                        <span v-for="student in teamData[0].students">{{ student.studentName }} </span>
                    </el-form-item>
                    <el-form-item label="项 目:">
                        <span>{{ teamData[0].project == null ? '暂无' : teamData[0].project.projectName }}</span>
                    </el-form-item>
                    <el-form-item label="指导老师:">
                        <span>{{ teamData[0].teacher == null ? '暂无' : teamData[0].teacher.teacherName }}</span>
                    </el-form-item>
                    <el-form-item label="得 分:">
                        <span>{{ teamData[0].score }}</span>
                    </el-form-item>
                    <el-form-item label="小组文件:">
                        <el-table
                            :data="filesData.filter((data) => !search || data.filesName.toLowerCase().includes(search.toLowerCase()))"
                            :default-sort="{ prop: 'teamId', order: ' ascending' }"
                            border
                            class="table"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column label="文件名" sortable prop="filesName"> </el-table-column>
                            <el-table-column label="上传者" sortable prop="student.studentName"></el-table-column>
                            <el-table-column label="文件类型" prop="type"> </el-table-column>
                            <el-table-column label="文件大小" sortable prop="size"></el-table-column>
                            <el-table-column label="下载次数" sortable prop="downcounts"> </el-table-column>
                            <el-table-column label="上传时间" sortable prop="uploadTime"> </el-table-column>
                            <el-table-column align="center">
                                <template slot="header" slot-scope="scope">
                                    <el-input v-model="search" size="mini" placeholder="输入文件名搜索" />
                                </template>
                                <template slot-scope="scope" align="center">
                                    <!-- <el-button type="text" @click="online(scope.$index, scope.row)">在线查看</el-button> -->
                                    <el-button type="text" @click="downLoad(scope.$index, scope.row)">下载</el-button>
                                    <!-- <el-button type="text" class="red" @click="removeFiles(scope.$index, scope.row)">删除</el-button> -->
                                    <!-- <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button
                        > -->
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <!-- <el-form-item label="选择器">
                        <el-select v-model="form.region" placeholder="请选择">
                            <el-option key="bbk" label="步步高" value="bbk"></el-option>
                            <el-option key="xtc" label="小天才" value="xtc"></el-option>
                            <el-option key="imoo" label="imoo" value="imoo"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <!-- <el-form-item label="日期时间">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="form.date1"
                                value-format="yyyy-MM-dd"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%"></el-time-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="城市级联">
                        <el-cascader :options="options" v-model="form.options"></el-cascader>
                    </el-form-item>
                    <el-form-item label="选择开关">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item label="多选框">
                        <el-checkbox-group v-model="form.type">
                            <el-checkbox label="步步高" name="type"></el-checkbox>
                            <el-checkbox label="小天才" name="type"></el-checkbox>
                            <el-checkbox label="imoo" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="单选框">
                        <el-radio-group v-model="form.resource">
                            <el-radio label="步步高"></el-radio>
                            <el-radio label="小天才"></el-radio>
                            <el-radio label="imoo"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="文本框">
                        <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item> -->
                </el-form>
                <div style="text-align: center; margin-top: 50px">
                    <el-button type="warning" @click="showTurnLeader = true" v-show="isLeader">转让队长</el-button>
                    <el-button type="danger" @click="exitTeam">退出小组</el-button>
                </div>
            </div>
        </div>
        <!-- 转让队长弹出框 -->
        <el-dialog title="转让队长" :visible.sync="showTurnLeader" width="30%">
            <el-form :model="inputNumber" ref="turnLeader" :rules="rules">
                <span>转让队长：</span>
                <el-form-item prop="becomeLeader">
                    <el-radio-group v-model="inputNumber.becomeLeader">
                        <el-radio v-for="student in teamMate" :label="student.studentName">{{ student.studentName }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item style="margin-top: 30px" prop="number">
                    <el-input size="large" v-model="inputNumber.number" placeholder="请输入您的号码"></el-input>
                </el-form-item>
                <div style="text-align: center; margin-top: 20px">
                    <el-button type="primary" round @click="turnLeader">确定转换</el-button>
                </div>
            </el-form>
            <!-- <el-form :model="addteam" label-width="70px">
                <el-form-item label="组名:">
                    <el-input v-model="addteam.teamName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="AddVisible = false">取 消</el-button>
                <el-button type="primary" @click="AddTeam">确 定</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    data() {
        return {
            inputNumber: {
                number: '',
                becomeLeader: ''
            },
            hasTeam: localStorage.getItem('hasTeam'),
            name: localStorage.getItem('ms_name'),
            isLeader: false,
            showFiles: [],
            showTurnLeader: false,
            number: localStorage.getItem('ms_number'),
            teamLeader: '',
            teamData: [],
            students: [],
            filesData: [],
            teamMate: [],
            rules: {
                number: [{ required: true, message: '请输入学号', trigger: 'blur' }],
                becomeLeader: [{ required: true, message: '请选择队长', trigger: 'blur' }]
            }
        };
    },
    created() {
        if (this.hasTeam == 'null') {
            this.$message.error('您还未加入小组，请尽快选择小组加入');
            this.$router.push('/table');
        } else {
            this.$http.get('http://localhost:9900/team/findMyTeam?number=' + this.number).then((res) => {
                this.teamLeader = res.data[0].leader;
                this.teamMate = res.data[0].team[0].students;
                if (this.teamLeader == this.name) {
                    this.isLeader = true;
                }
                this.teamData = res.data[0].team;
                console.log(this.teamData[0].students.length);
                if (this.teamData[0].students.length == 1) {
                    this.isLeader = false;
                }
                this.$http.get('http://localhost:9900/files/findTeamFiles?teamID=' + this.teamData[0].teamId).then((res) => {
                    this.filesData = res.data;
                });
            });
        }
    },
    methods: {
        //转让队长
        turnLeader() {
            this.$refs.turnLeader.validate((valid) => {
                if (valid) {
                    this.$http
                        .get(
                            'http://localhost:9900/team/changeLeader?number=' +
                                this.inputNumber.number +
                                '&name=' +
                                this.inputNumber.becomeLeader +
                                '&OldName=' +
                                this.number
                        )
                        .then((res) => {
                            if (res.data != 'success') {
                                this.$message.error(res.data);
                            } else {
                                this.$message.success('更改成功！');
                                this.showTurnLeader = false;
                            }
                            console.log(res.data);
                        });
                }
            });
        },
        //退出小组
        exitTeam() {
            if (this.hasTeam == 'null') {
                this.AddVisible = false;
                this.$message.error('您还未加入任何小组');
            } else {
                // 二次确认删除
                this.$confirm('您确定要退出该小组吗？退出后您选择的课题以及文件也会清零', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.get('http://localhost:9900/message/sendExitMessage?number=' + this.number).then((res) => {
                        console.log(res.data);
                        if (res.data != null) {
                            this.$message.error(res.data);
                        }
                        if (res.data == 'success') {
                            this.$message.success('发送申请成功，等待审核！');
                        }
                    });
                });
            }
        },
        //下载
        downLoad(index, row) {
            let a = document.createElement('a');
            a.href = 'http://localhost:9900/files/downloadFiles?id=' + row.filesId;
            a.click();
            this.$message.success('正在下载！');
        },
        onSubmit() {
            this.$message.success('提交成功！');
        }
    }
};
</script>